var chartMap = echarts.init(document.getElementById("map"));
var carouselTimeout = null

var color = ['#a6c84c', '#ffa022', '#46bee9'];

var BPointPath =
    'path://M981.76 72.96c10.88-13.44 13.44-32 5.76-47.36-7.68-15.36-23.04-25.6-40.32-25.6H76.16C58.88 0 42.88 10.24 35.84 25.6c-7.68 15.36-5.12 33.92 5.76 47.36L467.2 592.64V934.4H321.92c-24.96 0-44.8 19.84-44.8 44.8s19.84 44.8 44.8 44.8h379.52c24.96 0 44.8-19.84 44.8-44.8s-19.84-44.8-44.8-44.8H556.16V592.64l425.6-519.68zM852.48 89.6L511.36 505.6 170.88 89.6h681.6z';

var renderMap = function (map, displayIndex) {
    $('#maptooltip').hide()
    $('#xinwuqu').hide()
    $('#maplegend').hide()
    chartMap.clear()
    if (carouselTimeout) clearInterval(carouselTimeout)
    var convertData = function () {
        var res = [];
        var first = map.data[0]
        for (var i = 0; i < map.data.length; i++) {
            let item = map.data[i]
            res.push({
                name: item.Name,
                coords: [
                    [item.LONGITUDE, item.LATITUDE].concat([0.01]), [first.LONGITUDE, first.LATITUDE].concat([0.01])
                ],
                value: 100
            });
        }
        return res;
    };
    var router = convertData()
    var getpoints = function () {
        let points = []
        map.data.map(function (item) {
            points.push({
                name: item.Name ? item.Name: item.groupName,
                value: [item.LONGITUDE, item.LATITUDE].concat([0.01]),
                or: item
            })
        })
        return points
    }
    var points = getpoints()
    var option = {}
    $.getJSON(map.url, function (json) {
        echarts.registerMap('custom', json)
        var viewControl = {}
        //需求方要求  针对不同屏幕 不同地域的形状优化地图的视角（写死的）
        switch (displayIndex) {
            case 0:
                viewControl = {
                    alpha: 62,
                    beta: -20,
                    distance: 100,
                    center: [5, 0, 5],
                    zoomSensitivity: 0,
                    rotateSensitivity: 0,
                    panSensitivity: 0,
                    symbol: BPointPath,
                    symbolSize: [20, 22],
                    borderColor: '#66A8F7',
                    postEffect: false,
                    // opacity: .9,
                };
                break;
            case 1:
                viewControl = {
                    alpha: 120,
                    beta: 0,
                    distance: 85,
                    center: [5, 0, -16],
                    zoomSensitivity: 0,
                    rotateSensitivity: 0,
                    panSensitivity: 0,
                    symbol: 'circle',
                    symbolSize: 10,
                    borderColor: '#66A8F7',
                    postEffect: true,
                    // opacity: .9,
                };
                break;
            case 2:
                viewControl = {
                    alpha: 73,
                    beta: 0,
                    distance: 47,
                    center: [35, -10, 0],
                    zoomSensitivity: 0,
                    rotateSensitivity: 0,
                    panSensitivity: 0,
                    symbol: 'circle',
                    symbolSize: 10,
                    borderColor: '#333',
                    minDistance: 10,
                    postEffect: true,
                    opacity: .04,
                };
                break;
        }
        if (displayIndex == 0) {
            $('#maplegend').show()
            option = {
                tooltip: {
                    show: false,
                },
                geo3D: {
                    map: "custom",
                    type: "map",
                    name: "map",
                    silent: true,
                    boxHeight: 4,
                    regionHeight: 3,
                    shading: 'realistic',
                    realisticMaterial: {
                        roughness: "./static/css/mapbg.jpg",
                        // normalTexture: "./static/css/mapbg.jpg",
                        detailTexture: "./static/css/mapbg.jpg"
                    },
                    label: {
                        show: true,
                        distance: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                            borderColor: 'transparent',
                            borderWidth: 0,
                            backgroundColor: 'transparent'
                        }
                    },
                    viewControl: viewControl,
                    groundPlane: {
                        show: false
                    },
                    // postEffect: {
                    //     enable: true,
                    //     SSAO: {
                    //         enable: true,
                    //         radius: 3,
                    //         intensity: 1.4,
                    //         quality: 'medium'
                    //     }
                    // },
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: viewControl.borderColor,
                        opacity: viewControl.opacity,
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: .2
                        }
                    }
                },
                series: [{
                    type: 'map3D',
                    coordinateSystem: 'geo3D',
                    zlevel: -10,
                    geo3DIndex: 1,
                }]
            };
            var firstpoint = points[0]

            // points数组第一位的 点 画成白色 
            option.series.push({
                name: 'point',
                showEffectOn: 'render',
                effectType: "ripple",
                type: 'scatter3D',
                polyline: true,
                coordinateSystem: 'geo3D',
                symbolSize: 20,
                symbol: 'circle',
                zlevel: 1000,
                progressive: 20,
                itemStyle: {
                    color: '#fff'
                },
                label: {
                    show: true,
                    formatter: '{b}',
                    textStyle: {
                        fontWeight: 800,
                        color: '#000',
                        fontSize: 16,
                        padding: [4, 10],
                        backgroundColor: '#ffffffcc'
                    }
                },
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        opacity: .8
                    },
                    label:{
                        show: false
                    }
                },
                data: [firstpoint]
            })
            // points数组第一位的 点 画成蓝色
            option.series.push({
                name: 'point',
                showEffectOn: 'render',
                effectType: "ripple",
                type: 'scatter3D',
                polyline: true,
                coordinateSystem: 'geo3D',
                symbolSize: 14,
                symbol: 'circle',
                zlevel: 1000,
                progressive: 20,
                itemStyle: {
                    color: '#0069F5'
                },
                label: {
                    show: false,
                },
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        opacity: .8
                    },
                    label:{
                        show: false
                    }
                },
                data: [firstpoint]
            })
            // points数组去掉第一个点
            var nofirstpoint = []
            for(var i = 0 ; i < points.length; i ++){
                if(i > 0){
                    nofirstpoint.push(points[i])
                }
            }
            option.series.push({
                name: 'point',
                showEffectOn: 'render',
                effectType: "ripple",
                type: 'scatter3D',
                polyline: true,
                coordinateSystem: 'geo3D',
                symbolSize: viewControl.symbolSize,
                symbol: viewControl.symbol,
                zlevel: 2,
                progressive: 20,
                itemStyle: {
                    color: 'rgb(110, 232, 191)'
                },
                label: {
                    show: false,
                },
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        opacity: .8
                    },
                    label:{
                        show: false
                    }
                },
                callback: function (seriesModel, control) {       // 修改ECHARTGL的PointsBuilder 抛出seriesModel和this 以便控制Points的高亮和低亮 包括获取seriesModel的配置
                    var _this = control
                    var playIndex = 0
                    var playData = seriesModel.getData();
                    var tip = document.getElementsByClassName('maptipcontent')[0]
                    var obj = seriesModel.option.data[playIndex].or
                    _this.highlight(playData, playIndex);
                    $('#maptooltip').show()
                    tip.innerHTML = '<dl>'
                        + '<dt>' + seriesModel.option.data[playIndex].name + '</dt>'
                        + '<dd style="font-size: 16px;"><span style="margin-right: 10px"><em style="color:#EA6E6E;margin-right: 10px;">●</em>紧急</span><span style="margin-right: 10px"><em style="color:#6EE8BF;margin-right: 10px;">●</em>一般</span></dd>'
                        + '<dd>虚&nbsp;&nbsp;拟&nbsp;&nbsp;机： <em style="color:#EA6E6E">' + obj.vmemalarm + '</em> / <em style="color:#6EE8BF">' + obj.vmcomalarm + '</em></dd>'
                        + '<dd>服&nbsp;&nbsp;务&nbsp;&nbsp;器： <em style="color:#EA6E6E">' + obj.otemalarm + '</em> / <em style="color:#6EE8BF">' + obj.otcomalarm + '</em></dd>'
                        + '<dd>网络设备： <em style="color:#EA6E6E">' + obj.netemalarm + '</em> / <em style="color:#6EE8BF">' + obj.netcomalarm + '</em></dd>'
                        + '<dd>其&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他： <em style="color:#EA6E6E">' + obj.devemalarm + '</em> / <em style="color:#6EE8BF">' + obj.devcomalarm + '</em></dd></dl>';
                    playIndex = 1
                    carouselTimeout = setInterval(function () {
                        var downloadIndex = playIndex - 1 < 0 ? seriesModel.option.data.length - 1 : playIndex - 1
                        var obj = seriesModel.option.data[playIndex].or
                        _this.downplay(playData, downloadIndex);
                        _this.highlight(playData, playIndex);
                        tip.innerHTML = '<dl>'
                            + '<dt>' + seriesModel.option.data[playIndex].name + '</dt>'
                            + '<dd style="font-size: 16px;"><span style="margin-right: 10px"><em style="color:#EA6E6E;margin-right: 10px;">●</em>紧急</span><span style="margin-right: 10px"><em style="color:#6EE8BF;margin-right: 10px;">●</em>一般</span></dd>'
                            + '<dd>虚&nbsp;&nbsp;拟&nbsp;&nbsp;机： <em style="color:#EA6E6E">' + obj.vmemalarm + '</em> / <em style="color:#6EE8BF">' + obj.vmcomalarm + '</em></dd>'
                            + '<dd>服&nbsp;&nbsp;务&nbsp;&nbsp;器： <em style="color:#EA6E6E">' + obj.otemalarm + '</em> / <em style="color:#6EE8BF">' + obj.otcomalarm + '</em></dd>'
                            + '<dd>网络设备： <em style="color:#EA6E6E">' + obj.netemalarm + '</em> / <em style="color:#6EE8BF">' + obj.netcomalarm + '</em></dd>'
                            + '<dd>其&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他： <em style="color:#EA6E6E">' + obj.devemalarm + '</em> / <em style="color:#6EE8BF">' + obj.devcomalarm + '</em></dd></dl>';
                        if (playIndex >= seriesModel.option.data.length - 1) {
                            playIndex = 0
                        } else {
                            playIndex++
                        }
                    }, 8000)
                },
                data: nofirstpoint
            })
            // 画连接线
            option.series.push({
                name: 'line',
                type: 'lines3D',
                zlevel: 4,
                coordinateSystem: 'geo3D',
                effect: {
                    show: true,
                    trailWidth: 4,
                    trailOpacity: 0.8,
                    trailLength: 0.2,
                    period: 4,
                    trailColor: '#fff'
                },
                label: {
                    show: false
                },
                lineStyle: {
                    width: 2,
                    opacity: 0.8,
                    color: '#cdf1fc'
                },
                data: router
            })
            chartMap.setOption(option);
        }
        if (displayIndex == 1) {
            $('#maplegend').hide()
            var pointA = [], pointB = []
            for(var i = 0; i < points.length; i ++){
                if(points[i].or.type == 'A'){
                    pointA.push(points[i])
                }
                if(points[i].or.type == 'B'){
                    pointB.push(points[i])
                }
            }
            option = {
                tooltip: {
                    show: false,
                },
                geo3D: {
                    map: "custom",
                    type: "map",
                    name: "map",
                    silent: true,
                    boxHeight: 4,
                    regionHeight: 3,
                    shading: 'realistic',
                    realisticMaterial: {
                        roughness: "./static/css/mapbg.jpg",
                        // normalTexture: "./static/css/mapbg.jpg",
                        detailTexture: "./static/css/mapbg.jpg"
                    },
                    label: {
                        show: true,
                        distance: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                            borderColor: 'transparent',
                            borderWidth: 0,
                            backgroundColor: 'transparent'
                        }
                    },
                    viewControl: viewControl,
                    groundPlane: {
                        show: false
                    },
                    // postEffect: {
                    //     enable: true,
                    //     SSAO: {
                    //         enable: true,
                    //         radius: 3,
                    //         intensity: 1.4,
                    //         quality: 'medium'
                    //     }
                    // },
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: viewControl.borderColor,
                        opacity: viewControl.opacity,
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: .2
                        }
                    }
                },
                series: [{
                    type: 'map3D',
                    coordinateSystem: 'geo3D',
                    zlevel: -10,
                    geo3DIndex: 1,
                }]
            };
            option.series.push({
                name: 'point',
                showEffectOn: 'render',
                effectType: "ripple",
                type: 'scatter3D',
                polyline: true,
                coordinateSystem: 'geo3D',
                blendMode: 'lighter',   // 点聚焦颜色渐变
                symbolSize: 3,
                symbol: 'circle',
                zlevel: 2,
                itemStyle: {
                    color: '#fff',
                },
                label: {
                    show: false
                },
                emphasis: {
                    itemStyle: {
                        color: '#fff',
                        opacity: .8
                    },
                    label:{
                        show: false
                    }
                },
                data: pointB
            })

            // pointsA数组第一位的 点 画成白色 
            option.series.push({
                name: 'point',
                showEffectOn: 'render',
                effectType: "ripple",
                type: 'scatter3D',
                polyline: true,
                coordinateSystem: 'geo3D',
                symbolSize: 20,
                symbol: 'circle',
                zlevel: 1000,
                progressive: 20,
                blendMode: 'lighter',
                itemStyle: {
                    color: '#fff'
                },
                label: {
                    show: true,
                    formatter: function(point){
                        return point.data.or.groupName
                    },
                    textStyle: {
                        fontWeight: 800,
                        color: '#000',
                        fontSize: 16,
                        padding: [4, 10],
                        backgroundColor: '#ffffff55'
                    }
                },
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        opacity: .8
                    },
                    label:{
                        show: false
                    }
                },
                data: [pointA[0]]
            })
            // pointsA数组第一位的 点 画成蓝色
            option.series.push({
                name: 'point',
                showEffectOn: 'render',
                effectType: "ripple",
                type: 'scatter3D',
                polyline: true,
                coordinateSystem: 'geo3D',
                symbolSize: 14,
                symbol: 'circle',
                zlevel: 1000,
                progressive: 20,
                itemStyle: {
                    color: '#0069F5'
                },
                label: {
                    show: false,
                },
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        opacity: .8
                    },
                    label:{
                        show: false
                    }
                },
                data: [pointA[0]]
            })

            var nofirstpointA = []
            for(var i = 0 ; i < pointA.length; i ++){
                if(i > 0){
                    nofirstpointA.push(pointA[i])
                }
            }
            option.series.push({
                name: 'point',
                showEffectOn: 'render',
                effectType: "ripple",
                type: 'scatter3D',
                polyline: true,
                coordinateSystem: 'geo3D',
                symbolSize: [24, 26],
                symbol: BPointPath,
                zlevel: 100,
                itemStyle: {
                    // A类点区别颜色
                    color: function(point){
                        var threshold = parseInt(point.data.or.threshold)
                        var orderNumber = parseInt(point.data.or.orderNumber)
                        if(orderNumber > threshold){
                            return  '#e70a29'
                        } else {
                            return  '#07be80'
                        }
                    },
                    opacity: 1
                },
                label: {
                    show: true,
                    position: 'bottom',
                    formatter: function(point, data){
                        var threshold = parseInt(point.data.or.threshold)
                        var orderNumber = parseInt(point.data.or.orderNumber)
                        var name = point.data.or.groupName.split('-')[1]
                        return name
                    },
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 800,
                        backgroundColor: '#ffffff77',
                        padding: [3, 6],
                        color: '#333',
                        borderRadius: 4
                    }
                },
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        opacity: .8
                    },
                    label:{
                        show: false
                    }
                },
                callback: function(seriesModel, control){
                    if(displayIndex == 1){
                        var _this = control
                        var playIndex = 1
                        var playData = seriesModel.getData();
                        var tip = document.getElementsByClassName('maptipcontent')[0]
                        carouselTimeout = setInterval(function () {
                            var downloadIndex = playIndex - 1 < 0 ? seriesModel.option.data.length - 1 : playIndex - 1
                            var obj = seriesModel.option.data[playIndex].or
                            _this.downplay(playData, downloadIndex);
                            _this.highlight(playData, playIndex);
                            $('#maptooltip').show()
                            tip.innerHTML = '<dl>'
                                + '<dd>子&nbsp;&nbsp;公&nbsp;&nbsp;司： <em>' + obj.groupName + '</em></dd>'
                                + '<dd>门店数量： <em style="color:#EA6E6E">' + obj.storeCount + '</em></dd>'
                                + '<dd>报修数量： <em style="color:#EA6E6E">' + obj.orderNumber + '</em></dd>';
                            if (playIndex >= seriesModel.option.data.length - 1) {
                                playIndex = 0
                            } else {
                                playIndex++
                            }
                        }, 8000)
                    }
                },
                data: nofirstpointA
            })
            var display2router = function () {
                var res = [];
                var first = pointA[0].or
                for (var i = 0; i < pointA.length; i++) {
                    let item = pointA[i].or
                    res.push({
                        name: item.Name,
                        coords: [[item.LONGITUDE, item.LATITUDE].concat([0.01]), [first.LONGITUDE, first.LATITUDE].concat([0.01])],
                        value: 100
                    });
                }
                return res;
            };

            var display2routerData = display2router()
            // 画连接线
            option.series.push({
                name: 'line',
                type: 'lines3D',
                zlevel: 4,
                coordinateSystem: 'geo3D',
                effect: {
                    show: true,
                    trailWidth: 4,
                    trailOpacity: 0.8,
                    trailLength: 0.2,
                    period: 4,
                    trailColor: '#fff'
                },
                label: {
                    show: false
                },
                lineStyle: {
                    width: 2,
                    opacity: 0.8,
                    color: '#cdf1fc'
                },
                data: display2routerData
            })
            chartMap.setOption(option);
        }
        if (displayIndex == 2) {
            $('#xinwuqu').show()
            var point3A = [], point3B = []
            for(var i = 0; i < points.length; i ++){
                let point = points[i]
                if(point.or.type == 'A'){
                    point3A.push(point)
                }
                if(point.or.type == 'B'){
                    point3B.push(point)
                }
            }
            option = {
                tooltip: {
                    show: false,
                },
                bmap : {
                    center: [120.435416, 31.513001],
                    zoom: 13,
                    roam: false,
                    mapStyle: {
                        styleJson: [{
                                "featureType": "water",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#044161"
                                }
                            },
                            {
                                "featureType": "land",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#004981"
                                }
                            },
                            {
                                "featureType": "boundary",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#064f85"
                                }
                            },
                            {
                                "featureType": "railway",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#004981"
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#005b96",
                                    "lightness": 1
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "labels",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "arterial",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#004981"
                                }
                            },
                            {
                                "featureType": "arterial",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#00508b"
                                }
                            },
                            {
                                "featureType": "poi",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "green",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#056197",
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "subway",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "manmade",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "local",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "arterial",
                                "elementType": "labels",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "boundary",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#029fd4"
                                }
                            },
                            {
                                "featureType": "building",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#1a5787"
                                }
                            },
                            {
                                "featureType": "label",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            }
                        ]
                    }
                },
                series:[
                    {
                        name: 'point3B',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        blendMode: 'lighter',   // 点聚焦颜色渐变
                        symbolSize: 5,
                        symbol: 'circle',
                        itemStyle: {
                            color: '#6eafe8',
                        },
                        label: {
                            show: false
                        },
                        data: point3B
                    },
                    {
                        name: 'point3A',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        symbolSize: [20, 22],
                        symbol: BPointPath,
                        itemStyle: {
                            color: '#6ee8bf',
                        },
                        label: {
                            show: true,
                            position: 'bottom',
                            formatter: function(point, data){
                                var name = point.data.or.Name
                                return name
                            },
                            textStyle: {
                                fontSize: 12,
                                fontWeight: 800,
                                backgroundColor: '#ffffff77',
                                padding: [3, 6],
                                color: '#333',
                                borderRadius: 4
                            }
                        },
                        data: point3A
                    }
                ]
            }

            chartMap.setOption(option);
            var blist = [];
            var map = chartMap.getModel().getComponent('bmap').getBMap();
            function drawBoundary() {
                var pointArray = [];
                for (var i = 0; i < blist.length; i++) {
                    var ply = new BMap.Polygon(blist[i].points, { 
                        strokeWeight: 2,   //边框宽度
                        strokeColor: "#6eafe8",   //边框颜色
                        strokeStyle: 'solid',
                        fillOpacity: .1,
                        fillColor: " #4290cd" //填充颜色
                    }); //建立多边形覆盖物
                    ply.name = blist[i].name;
                    map.addOverlay(ply);
                    var path = ply.getPath();
                        pointArray = pointArray.concat(path);
                }
                map.setViewport(pointArray);    //调整视野
                map.setZoom(13)
            }
            function addDistrict(districtName) {
                var bdary = new BMap.Boundary();
                bdary.get(districtName, function (rs) {       //获取行政区域
                    var count = rs.boundaries.length; //行政区域的点有多少个
                    for (var i = 0; i < count; i++) {
                        blist.push({ points: rs.boundaries[i], name: districtName });
                    };
                    drawBoundary();
                });
            }
            addDistrict("无锡新吴区")
        }
    })
}
